<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>苏州市天平山风景名胜区</title>
	<style>
		
		 a{
			text-decoration: none;
		}
		
		   body {
		            font-family: Arial, sans-serif;
		            margin: 0;
		            padding: 20px;
		        }
		        .container {
		            display: flex;
		            justify-content: space-between;
		            align-items: center;
		        }
		        .image-container {
		            width: 30%;
					position: relative;
		        }
		        .info-container {
		            width: 70%;
					position: absolute;
					margin-left: 380px;
		        }
		        .price {
		            background-color: #ff7f00;
		            color: white;
		            padding: 10px;
		            text-align: center;
		            border-radius: 10px;
		        }
		        .price span {
		            font-size: 36px;
		            vertical-align: middle;
		        }
		        .price small {
		            font-size: 14px;
		        }
				
				img{
					width:360px; 
					height:340px;
				}
		
		</style>	
			
		
		</head>
		<body>
		<p><Strong>您所在的位置:&emsp;</strong><a href="#">同程首页></a>  景区门票>  苏州景区门票> 苏州市天平山风景名胜区门票及相关产品</p>
		<input type="hidden" id="scenic-name-input" value="${param.scenic_name}">
		 <div class="container">
		        <div class="image-container">
		        </div>
		        <div class="info-container">
		            <h1> <span id="scenic_name"> </span> <span style="color: orange;"></span></h1>
		            <p>四大赏枫地之一，江南胜境</p>
		            <p><strong>景点地址：</strong> <span id="address"></span></p>
		            <div class="price">
						<span id="price"></span>
		                <small><a href="#">&emsp;<strong>去购票</strong></a></small>
		            </div>
		            <p><strong>精彩点评：</strong>景色优美，秋意盎然。就是人真多，上下山拥堵，灰尘飞扬...<a href="#">更多</a></p>
		            <p>5368条用户点评&emsp;<a href="#">我要点评</a></p>
		        </div>
		    </div>
		</body>
	</html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
	var scenic_name = document.getElementById('scenic-name-input').value;
	$.ajax({
		url: "/queryName",
		method: "POST",
		data: { scenic_name: scenic_name },
		dataType: "json",
		success: function(data) {
			if (data && data.length > 0){

				//从data数组中取出第一个元素
				var scenic = data[0];
				$("#scenic_name").text(scenic.scenic_name);
				$("#address").text(scenic.scenic_address);
				$("#price").text("¥" + scenic.price + "起");
				let imgUrl = "<img src='/img/"+scenic.img+"' alt='Image 1' title='"+scenic.scenic_name+"'>";
				$('.image-container').html(imgUrl);

			}else{
				console.error("No scenic data found");
			}
		},
		error: function(xhr, status, error) {
			console.error("Error fetching scenic details:", error);
		}
	});

</script>